.main-board {
    /*width: 200%;*/
    /*margin: auto;*/
    /*margin-top: 30px;*/
    /*position: relative;*/
    /*margin-bottom: 30px;*/
    /*height: 100%;*/



    font-size: 18px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.main-wrapper {
    width: 200%;
    height: 100%;
    font-size: 0;
    position: absolute;
    left:0px;

    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
}
.main-board.move-left .main-wrapper{
    /*-webkit-transform: translate(-50%,0);*/
    /*-moz-transform: translate(-50%,0);*/
    /*-o-transform: translate(-50%,0);*/
    /*-ms-transform: translate(-50%,0);*/
    /*transform: translate(-50%,0);*/
    left:-100%;
}

.move-left {
    /*-webkit-transform: translate(-50%,0);*/
    /*-moz-transform: translate(-50%,0);*/
    /*-o-transform: translate(-50%,0);*/
    /*-ms-transform: translate(-50%,0);*/
    /*transform: translate(-50%,0);*/
}

.move-right {
    -webkit-transform: translate(50%,0);
    -moz-transform: translate(50%,0);
    -o-transform: translate(50%,0);
    -ms-transform: translate(50%,0);
    transform: translate(50%,0);
}
.overview-page, .details-page{
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
}
.overview-page,.main-board.move-left .main-wrapper .details-page{
    opacity: 1;
}
.details-page,.main-board.move-left .main-wrapper .overview-page{
    opacity: 0;
}